import React from 'react'
import { BrowserRouter, createBrowserRouter, RouterProvider, Router, Route, Routes, Navigate, Link, Outlet, useRoutes } from 'react-router-dom'
const boxStyle = {
  margin: '10px',
  border: '1px solid #ccc',
  borderRadius: '10px',
  padding: '10px',
}
const inlineFlexStyle = {
  display: 'flex',
  justifyContent: 'flex-start',
  padding: '2px',
  gap: '6px'
}

// 同一个组件可以绑定多个路径
const routeList = [
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "about",
        element: <About />,
      },
      {
        path: "inbox",
        element: <Inbox />,
      },
    ]
  },
]

const router = createBrowserRouter(routeList)

// RouterProvider 可以将路由数据映射到 函数组件和class组件
export function RouterApp11() {
  return (
    <RouterProvider router={router}></RouterProvider >
  )
}

export class RouterApp1 extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return (
      <RouterProvider router={router}></RouterProvider >
    )
  }
}

function App(props) {
  return (
    <div>
      <ul style={inlineFlexStyle}>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/inbox">Inbox</Link></li>
      </ul>
      <Outlet />
    </div>
  )
}

function About() {
  return (
    <div style={boxStyle}>
      <h3>这是About组件啊</h3>
    </div>
  )
}

function Inbox(props) {
  return (
    <div style={boxStyle}>
      <h2>这是Inbox组件啊</h2>
      {props.children || "Welcome to your Inbox"}
    </div>
  )
}

function Message(props) {
  return (
    <div style={boxStyle}>
      <h3>Message {props.params.id}</h3>
    </div>
  )
}